<template>
  <div class="article-meta">
    <a href=""><img :src="article.author.image" /></a>
    <div class="info">
      <a href="" class="author">{{article.author.username}}</a>
      <span class="date">{{article.createdAt | date('MMM DD, YYYY')}}</span>
    </div>
    <button v-if="!user || (user.username != article.author.username)" :disabled='followDisbaled' @click="handFollow" class="btn btn-sm btn-outline-secondary">
      <i class="ion-plus-round"></i> &nbsp;  {{article.author.following ? 'Unfollow': 'Follow'}}&nbsp; {{article.author.username}} <span class="counter"></span>
    </button>
    &nbsp;&nbsp;
    <button v-if="!user || (user.username != article.author.username)" class="btn btn-sm btn-outline-primary" :class="{active: article.favorited}" :disabled='favoriteDisabled' @click="onFavorite">
      <i class="ion-heart"></i>  &nbsp;  Favorite Post <span class="counter">{{article.favoritesCount}}</span>
    </button>
    <button v-if="user && (user.username == article.author.username)" :disabled='editorDisbaled' class="btn btn-sm btn-outline-secondary">
      <nuxt-link :to="{name: 'editor', params: {slug: article.slug}}">
        <i class="ion-edit"></i> &nbsp; Edit Article <span class="counter"></span>
      </nuxt-link>
    </button>
    <button v-if="user && (user.username == article.author.username)" :disabled='deleteDisabled' @click="deleteArticleData" class="btn btn-sm btn-outline-danger">
      <i class="ion-trash-a"></i> &nbsp; Delete Article <span class="counter"></span>
    </button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { followUser, unFollowUser } from '@/api/profiles'
import { addFavorite, deleteFavorite, deleteArticle } from '@/api/article.js'
export default {
  props:{
    article:{
      typeof: Object,
      require: true
    }
  },
  data(){
    return{
      followDisbaled: false, // 关注作者按钮是否禁用
      favoriteDisabled: false, // 关注文章按钮是否禁用
      editorDisbaled: false, // 编辑按钮是否禁用
      deleteDisabled: false, // 删除按钮是否禁用
    }
  },
  computed: {
    ...mapState('user', { user: 'user'})
  },
  methods:{
    //关注作者|取消关注作者
    handFollow(){
      this.followDisbaled = true
      if(this.article.author.following){
        // 取消关注作者
        unFollowUser(this.article.author.username).then(()=>{
          this.article.author.following = false
          this.followDisbaled = false
        })
      } else {
        // 关注作者
        followUser(this.article.author.username).then(()=>{
          this.article.author.following = true
          this.followDisbaled = false
        })
      }
    },
    // 点赞|取消点赞
    onFavorite(){
      this.favoriteDisabled = true
      if(this.article.favorited){
        //取消点赞
        deleteFavorite(this.article.slug).then(()=>{
          this.article.favorited = false
          this.article.favoritesCount += -1
          this.favoriteDisabled = false
        })
      }else{
        // 点赞
        addFavorite(this.article.slug).then(()=>{
          this.article.favorited = true
          this.article.favoritesCount += 1
          this.favoriteDisabled = false
        })
      }
    },
    // 删除文章
    deleteArticleData(){
      this.deleteDisabled = true
      deleteArticle(this.article.slug).then(res=>{
        this.$router.push({ name: 'profile', params:{ username: this.user.username } })
      }).finally(()=>{
         this.deleteDisabled = false
      })
    }
  }
}
</script>